<section class="content-header">
  <h1>
    {{title}}
  </h1>
</section>
<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-3 col-md-push-9">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">查询区域</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div class="form-group">
            <label for="DateTimeRange">时间</label>
            <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
          </div>
          <div class="form-group">
            <label>区域</label>
            <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems"
              displayExpr="subArea" [(selectedItem)]="subAreaSelected" [value]="subAreaItems[0]" [searchEnabled]="true"
              (onValueChanged)="onSubAreaSelectedChange($event)">
            </dx-select-box>
          </div>
        </div>
        <div class="box-footer">
          <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
        </div>
      </div>
    </div>

    <div class="col-md-9 col-md-pull-3">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">{{title}}查询</h3>
          <div>
              {{subAreaSelected.subArea}}默认模板：
              <button type="button" data-toggle="modal" data-target="#label3" class="btn btn-primary btn-sm">{{defaultTmp!==undefined ?defaultTmp.defaultTmp:'--'}}</button>
          </div>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#areasrange">
              OEE模板选择
            </button>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#areas">
              换型配置
            </button>
            <button type="button" (click)="saveChanges()" class="btn btn-info btn-sm" data-toggle="tooltip" title="保存">
              <i class="fa fa-save"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">

            <!-- <dx-data-grid [dataSource]="templateDetail" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true">
                <dxo-paging [pageSize]="40"></dxo-paging>
                <dxi-column [allowEditing]="false" dataField="shiftId" caption="班次">
                </dxi-column>
                <dxi-column [allowEditing]="false" dataField="jph" caption="JPH">
                </dxi-column>
              </dx-data-grid> -->
          
          <dx-data-grid [dataSource]="moeeList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true"
            (onRowUpdated)="selChange($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
            <dxo-paging [pageSize]="40"></dxo-paging>
            <dxo-export [enabled]="true" fileName="Employees" [allowExportSelectedData]="false"></dxo-export>
            <dxo-editing mode="cell" [allowUpdating]="true"></dxo-editing>
            <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
            </dxo-pager>
            <dxi-column [allowEditing]="false" caption="操作" [width]="80" [allowSorting]="false" cellTemplate="cellTemplate">
            </dxi-column>
            <div *dxTemplate="let data of 'cellTemplate'">
                <button type="button" class="btn-group" (click)="delData(data.data)">
                    删除
                </button>
            </div>
            <dxi-column [allowEditing]="false" dataField="workday" caption="日期">
            </dxi-column>
            <dxi-column [allowEditing]="false" dataField="subArea" caption="区域">
            </dxi-column>
            <dxi-column [allowEditing]="false" dataField="queryStation" caption="查询工位">
              <dxo-lookup [dataSource]="equipemntItems" displayExpr="stationCode" valueExpr="stationCode">
              </dxo-lookup>
            </dxi-column>
            <dxi-column [allowEditing]="true" dataField="templateName" caption="模版">
              <dxo-lookup [dataSource]="templateItems" displayExpr="templateName" valueExpr="templateName">
              </dxo-lookup>
            </dxi-column>
            <dxi-column [allowEditing]="true" dataField="defaultTmp" caption="默认模版">
              <dxo-lookup [dataSource]="templateItems" displayExpr="templateName" valueExpr="templateName">
              </dxo-lookup>
            </dxi-column>
            <dxi-column [allowEditing]="false" dataField="shift" caption="班次">
            </dxi-column>
            <dxi-column [allowEditing]="false"  dataField="h1" caption="1H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h2" caption="2H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h3" caption="3H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h4" caption="4H">
            </dxi-column>
            <dxi-column [allowEditing]="false"  dataField="h5" caption="5H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h6" caption="6H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h7" caption="7H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h8" caption="8H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h9" caption="9H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h10" caption="10H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="h11" caption="11H">
            </dxi-column>
            <dxi-column  [allowEditing]="false" dataField="subValue" caption="损失值">
            </dxi-column>
            <dxi-column [allowEditing]="false" dataField="changeDesc" caption="描述" [width]="200">
            </dxi-column>
          </dx-data-grid>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="areas" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">配置月度单日oee模版</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="newTime">时间</label>
            <input type="text" class="form-control pull-right" id="newTime" placeholder="请选择日期" />
          </div>
          <div class="form-group">
            <label>区域</label>
            <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems"
              displayExpr="subArea" [(selectedItem)]="subAreaSelected" [value]="subAreaSelected" [searchEnabled]="true"
              (onValueChanged)="onSubAreaSelectedChange($event,1)">
            </dx-select-box>
          </div>
          <div class="form-group">
            <label>工位</label>
            <dx-select-box #dddb disabled="true" style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected"
              displayExpr="stationCode" placeholder="请选择工位" [searchEnabled]="true" [items]="equipemntItems">
            </dx-select-box>
          </div>
          <div class="form-group">
            <label>班次</label>
            <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems"
              displayExpr="shiftName" [(selectedItem)]="shiftSelected" [value]="shiftSelected" [searchEnabled]="true"
              (onValueChanged)="onShiftSelectedChange($event,1)">
            </dx-select-box>
          </div>
          <div class="form-group">
            <label>模版</label>
            <dx-select-box disabled="true"  style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px;" [items]="templateItems"
              displayExpr="templateName" [(selectedItem)]="templateSel" [value]="templateSel" [searchEnabled]="true"
              (onValueChanged)="onTemplateSelectedChange($event)">
            </dx-select-box>
          </div>
          <div class="form-group" style="overflow: hidden;">
            <label>小时值换型配置</label>
            <table>
              <tr>
                <td>1H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h1">
                </td>
                <td>2H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h2">
                </td>
                <td>3H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h3">
                </td>
                <td>4H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h4">
                </td>
              </tr>
              <tr>
                <td>5H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h5">
                </td>
                <td>6H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h6">
                </td>
                <td>7H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h7">
                </td>
                <td>8H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h8">
                </td>
              </tr>
              <tr>
                <td>9H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h9">
                </td>
                <td>10H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h10">
                </td>
                <td>11H:
                  <input type="number" (ngModelChange)="calcValue($event)" [(ngModel)]="newItem.h11">
                </td>
              </tr>
            </table>
            <div class="form-group">
              <label>换型损失*</label>
              <input type="number" placeholder="换型损失" disabled="true" [ngModel]="newItem.subValue">
            </div>
            <div class="form-group">
              <label>换型说明*</label>
              <input type="text" style="width: 100%;" placeholder="换型说明" [(ngModel)]="newItem.changeDesc">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" (click)="saveConfig()">保存</button>
          <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="areasrange" tabindex="-1" role="dialog" aria-labelledby="myModalLabels">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabels">配置oee模版</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="newTime">时间</label>
            <input type="text" class="form-control pull-right" id="newTimeRange" placeholder="请选择日期" />
          </div>
          <div class="form-group">
            <label>区域</label>
            <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems"
              displayExpr="subArea" [(selectedItem)]="subAreaSelected" [value]="subAreaSelected" [searchEnabled]="true"
              (onValueChanged)="onSubAreaSelectedChange($event,1)">
            </dx-select-box>
          </div>
          <div class="form-group">
            <label>工位</label>
            <dx-select-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected"
              displayExpr="stationCode" placeholder="请选择工位" [searchEnabled]="true" [items]="equipemntItems">
            </dx-select-box>
          </div>
          <div class="form-group">
            <label>模版</label>
            <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="templateItems"
              displayExpr="templateName" [(selectedItem)]="templateSel" [value]="templateSel" [searchEnabled]="true"
              (onValueChanged)="onTemplateSelectedChange($event)">
            </dx-select-box>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" (click)="saveMoee()">保存</button>
          <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="label3" tabindex="-1" role="dialog" aria-labelledby="label3">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="label3">配置默认模板</h4>
          </div>
          <div class="modal-body">
            <ul>
              <li *ngFor="let t of templateItems" style="margin-top:5px;">
                  <button *ngIf='t?.templateName === defaultTmp?.defaultTmp' class="btn btn-block bg-green">{{t?.templateName}}</button>
                  <button *ngIf='t?.templateName !== defaultTmp?.defaultTmp' class="btn btn-block" 
                  (click)="changeDefault(t)">{{t?.templateName}}</button>
              </li>
            </ul>
          </div>
          <div class="modal-footer">
          </div>
        </div>
      </div>
    </div>

</section>